import React, { useEffect,useState } from 'react'
import './index.css'
import { functiongetAxiosList, listType,functionGetId } from '../../app/lists'
// 20.合理正确使用hooks的钩子函数12:12
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { Tabs, Popover,Popup,PopupPosition,Cell } from 'react-vant'
import {useNavigate} from 'react-router-dom'
const Home: React.FC = () => {
  const dispatch = useAppDispatch()
  const navigate=useNavigate()
  const list: listType[] = useAppSelector((state) => state.list.list)
  const items = [{
    title: '圈子',
    children: [{
      url: '',
      name: '',
      title: '圈子',
      id: '1',
      children: []
    }]
  }, {
    title: '话题',
    children: [{
      url: '',
      name: '',
      title: '话题',
      id: '2',
      children: []
    }]
  }, {
    title: '热门问答',
    children: list
  }, {
    title: '活动',
    children: [{
      url: '',
      name: '',
      title: '活动',
      id: '3',
      children: []
    }]
  }]
  const [state, setState] = useState<PopupPosition>('')
  const onClose = () => setState('')
  // 9.点击不感兴趣，蒙层消失并且对应数据删除12:12
  const actions = [{ text: '不感兴趣' }, { text: '举报垃圾内容' }];
  const select = (id:string) => {
    dispatch(functionGetId(id))
  }
  const getList = () => {
    dispatch(functiongetAxiosList())
  }
  useEffect(() => {
    getList()
  }, [])
  return (
    <div className='home'>
      <Tabs defaultActive={2}>
        {items.map((item, i) => (
          <Tabs.TabPane key={i} title={item.title}>
            {
              // 正确展示热门列表的数据
              // 17.发布成功后可在列表显示12:12
              item.children.map(v => {
                return <div key={v.id} className="item">
                  {/* 10.点击列表进入详情，正确跳转路由并携带参数12:12 */}
                  <div className='item-nas' onClick={()=>navigate(`/text${v.id}`)}>
                    <div><img src={v.url} alt="" /></div>
                    <div>{v.name}</div>
                  </div>
                  <div>{v.title}</div>
                  <div className='item-chi'>
                    <div>{v.children.length}条回答</div>
                    {/* 6.正确封装列表组件12:12 */}
                    <div><Popover
                      placement="bottom-start"
                      actions={actions}
                      onSelect={()=>select(v.id)}
                      offset={[-100,8]}
                      overlay
                      // 8.点击列表的x号，可出现蒙层12:12
                      reference={<div>X</div>}
                    /></div>
                  </div>
                </div>
              })
            }
          </Tabs.TabPane>
        ))}
      </Tabs>
      {/* 14.热门列表的发布按钮固定右下角12:12 */}
      <Cell title='＋' isLink onClick={() => setState('bottom')} style={{width: 50,height: 50,borderRadius: '50%',
    border: '1px solid #ccc',
    background: 'red',
    color: '#fff',
    fontSize: 50,
    position: 'sticky',
    left: 320,
    bottom:120,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',}}/>
      <Popup
        visible={state === 'bottom'}
        style={{ height: '30%' }}
        position='bottom'
        onClose={onClose}
      >
        {/* 15.点击发布按钮可跳转到发布页面12:12 */}
        <button className='btn' onClick={()=>navigate('/login')}>发布</button>
      </Popup>
    </div>
  )
}

export default Home